<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MoveSquare</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .mask{
            border:2px dotted #000000;
            background: rgba(56, 63, 103, 0.31);
            position:absolute;
            width:0;
            height:0;
            filter:alpha(opacity:10);
            /*opacity:0.1*/
        }
    </style>
    <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 vPosition;
        attribute vec4 a_Color;
        varying vec4 v_Color;
        uniform mat4 mat;
        void main()
        {
            gl_Position = mat * vPosition;
            v_Color = a_Color;
        }
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
//        precision mediump float;
//        uniform vec4 u_FragColor;
//        void
//        main()
//        {
//            gl_FragColor = u_FragColor;
//        }
        precision mediump float;
        varying vec4 v_Color;
        void main() {
            gl_FragColor = v_Color;
        }
    </script>

    <script type="text/javascript" src="../../Common/webgl-utils.js"></script>
    <script type="text/javascript" src="../../Common/initShaders.js"></script>
    <script type="text/javascript" src="../../Common/MV.js"></script>
    <script type="text/javascript" src="MoveSquare.js"></script>

</head>
<body>
<canvas id="gl-canvas" width="600" height="600">
    Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<div class="mask" style="display: none"></div>
<!--<button onclick="automove()">move</button>-->
</body>
</html>
